<template>
    <div class="mmbg">
        <Row style="text-align:left;padding:10px 0;">
            <Col span="6">
                <Input v-model="pageable.queryStr" placeholder="姓名/账号/部门/邮箱/电话/地址" @on-enter="doQuery">
                </Input>
            </Col>
            <Col span="18" style="text-align:right;">
                <ButtonGroup>
                    <Button type="primary" icon="ios-add-circle-outline" @click.native="doNew()">新增</Button>
                    <Button type="error" icon="ios-close-circle-outline" @click.native="doDel()" :loading="switches.delStatus">删除</Button>
                </ButtonGroup>
            </Col>
        </Row>
        <Table :columns="columns" :data="tables" :loading="switches.tableLoading" size="small"
               stripe border @on-selection-change="tableSelection"></Table>
        <Page :total="total" :current="curPage" show-total :page-size="pageable.size" @on-change="pageChange" class="pagee"/>
        <Drawer :title="userObj.id? '编辑用户资料': '新增用户资料'" :closable="false" v-model="switches.editUserDrawer" width="500">
            <Form ref="userForm" :model="userObj" :rules="userRule" :label-width="100">
                <FormItem label="姓名" prop="name">
                    <Input v-model="userObj.name" placeholder="姓名"></Input>
                </FormItem>
                <FormItem label="账号" prop="username">
                    <Input v-model="userObj.username" placeholder="账号"></Input>
                </FormItem>
                <FormItem label="密码" prop="password" v-show="!userObj.id">
                    <Input v-model="userObj.password" placeholder="密码"></Input>
                </FormItem>
                <FormItem label="手机" prop="mobile">
                    <Input v-model="userObj.mobile" placeholder="手机"></Input>
                </FormItem>
                <FormItem label="邮箱" prop="email">
                    <Input v-model="userObj.email" placeholder="邮箱"></Input>
                </FormItem>
                <FormItem label="身份证" prop="identity">
                    <Input v-model="userObj.identity" placeholder="身份证"></Input>
                </FormItem>
                <FormItem label="地址" prop="address">
                    <Input v-model="userObj.address" placeholder="地址"></Input>
                </FormItem>
                <FormItem label="账号状态">
                    <i-switch size="large" v-model="userObj.enabled">
                        <span slot="open">启用</span>
                        <span slot="close">禁用</span>
                    </i-switch>
                </FormItem>
                <FormItem style="text-align: right">
                    <Button type="primary" @click="makeEmpty" style="margin-left: 8px;width: 150px;">清空</Button>
                    <Button type="primary" @click="doSave" style="margin-left: 8px;width: 150px;" :loading="switches.saveStatus">保存</Button>
                </FormItem>
            </Form>
            <div class="hhh123" v-show="userObj.id">
                <Card dis-hover>
                    <p slot="title">账号&密码 操作</p>
                    <Input v-model="mpw">
                        <span slot="prepend">修改密码</span>
                        <Button slot="append" :loading="switches.savePwStatus" icon="md-checkbox-outline" type="primary" @click="savePW" class="bbdd" :disabled="!mpw"></Button>
                    </Input>
                </Card>
            </div>
        </Drawer>
    </div>
</template>

<script>
    export default {
        name: 'User',
        mounted: function () {
            this.loadUsers()
        },
        data() {
            return {
                switches: {
                    tableLoading: false,
                    editUserDrawer: false,
                    savePwStatus: false,
                    delStatus: false,
                    saveStatus: false
                },
                total: 0,
                curPage: 1,
                tables: [],
                selections: [],
                mpw: '',
                userObj: {},
                pageable: {
                    size: 20,
                    page: 0,
                    queryStr: ''
                },
                userRule: {
                    name: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                    username: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                    mobile: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '姓名',
                        align: 'center',
                        key: 'name'
                    },
                    {
                        title: '登录名',
                        align: 'center',
                        key: 'username'
                    },
                    {
                        title: '账号状态',
                        width: 100,
                        align: 'center',
                        key: 'gender',
                        render: (h, params) => {
                            let value = params.row.enabled
                            if (value) {
                                return h('p', {style: {color: 'green'}}, '启用')
                            }
                            return h('p', {style: {color: 'red'}}, '禁用')
                        }
                    },
                    {
                        title: '部门',
                        align: 'center',
                        key: 'orgName'
                    },
                    {
                        title: '岗位',
                        align: 'center',
                        key: 'postName'
                    },
                    {
                        title: '身份证',
                        align: 'center',
                        key: 'identity'
                    },
                    {
                        title: '性别',
                        width: 100,
                        align: 'center',
                        key: 'gender',
                        render: (h, params) => {
                            let value = params.row.gender
                            if (value === 0) {
                                return '女'
                            } else if (value === 1) {
                                return '男'
                            }
                        }
                    },
                    {
                        title: '年龄',
                        width: 100,
                        align: 'center',
                        key: 'age'
                    },
                    {
                        title: '出生年月',
                        align: 'center',
                        key: 'birthday'
                    },
                    {
                        title: '邮箱',
                        align: 'center',
                        key: 'email'
                    },
                    {
                        title: '电话',
                        align: 'center',
                        key: 'mobile'
                    },
                    {
                        title: '地址',
                        ellipsis: true,
                        align: 'center',
                        key: 'address'
                    }, {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.switches.editUserDrawer = true
                                            this.userObj = JSON.parse(JSON.stringify(params.row))
                                        }
                                    }
                                }, '编辑')
                            ])
                        }
                    }

                ]
            }
        },
        methods: {
            loadUsers() {
                this.switches.tableLoading = true
                window.myapi.do_gett('$user/list', this.pageable).then(resp => {
                    if (resp.status === 200 && resp.data.status === 200) {
                        this.tables = resp.data.data.content
                        this.total = resp.data.data.totalElements
                        this.curPage = resp.data.data.number + 1
                    } else {
                        this.$Notice.warning({
                            title: '提示',
                            desc: resp.data.msg
                        })
                    }
                }).finally(() => {
                    this.switches.tableLoading = false
                })
            },
            doQuery() {
                this.pageable.page = 0
                this.curPage = 1
                this.loadUsers()
            },
            doDel() {
                if (this.selections.length === 0) {
                    this.$Message.warning('没有选择数据');
                    return
                }

                this.$Modal.confirm({
                    title: '删除确认',
                    content: '<p>确认要删除该所选择的数据吗?</p>',
                    onOk: () => {
                        this.del(this.selections.map(item => item.id))
                    },
                    onCancel: () => {
                    }
                })
            },
            del (ids) {
                this.switches.delStatus = true
                window.myapi.do_del('$user/del', ids).then(resp => {
                    if (resp.status === 200 && resp.data.status === 200) {
                        this.loadUsers()
                        this.$Notice.success({
                            title: '提示',
                            desc: resp.data.msg
                        })
                    } else {
                        this.$Notice.warning({
                            title: '提示',
                            desc: resp
                        })
                    }
                }).finally(() => {
                    this.switches.delStatus = false
                })
            },
            doNew() {
                this.userObj = {
                    enabled: true
                }
                this.switches.editUserDrawer = true
            },
            doSave() {
                this.$refs['userForm'].validate((valid) => {
                    if (valid) {
                        this.switches.saveStatus = true
                        let url = this.userObj.id ? '$user/upd' : '$user/save'
                        let method = this.userObj.id ? 'PUT' : 'POST'
                        window.myapi.put_post(url, this.userObj, method).then(resp => {
                            if (resp.status === 200 && resp.data.status === 200) {
                                this.loadUsers()
                                this.$Notice.success({
                                    title: '提示',
                                    desc: resp.data.msg
                                })
                                this.switches.editUserDrawer = false
                            } else {
                                this.$Notice.error({
                                    title: '提示',
                                    desc: resp.data.msg
                                })
                            }
                        }).finally(() => {
                            this.switches.saveStatus = false
                        })
                    }
                })
            },
            savePW() {
                if (!this.mpw) {
                    this.$Message.warning('不能为空')
                    return
                }
                this.switches.savePwStatus = true
                window.myapi.do_post('$user/password', {password: this.mpw, id: this.userObj.id}).then(resp => {
                    if (resp.status === 200 && resp.data.status === 200) {
                        this.$Notice.success({
                            title: '提示',
                            desc: resp.data.msg
                        })
                        this.mpw = ''
                    } else {
                        this.$Notice.error({
                            title: '提示',
                            desc: resp.data.msg
                        })
                    }
                }).catch((error) => {}).finally(() => {
                    this.switches.savePwStatus = false
                })
            },
            tableSelection (selection, row) {
                this.selections = selection
            },
            makeEmpty() {
                if (this.userObj.id) {
                    this.userObj = {id: this.userObj.id}
                } else {
                    this.userObj = {}
                }
            },
            pageChange: function (index) {
                this.pageable.page = index - 1
                this.loadUsers()
            },
        }
    }
</script>

<style scoped>
    .mmbg {
        padding: 5px;
    }

    .bbdd{
        width:100px;
    }

    .pagee {
        position: fixed;
        bottom: 25px;
        right: 10px;
        border-radius: 5px;
    }
    .hhh123 {
        width: 100%;
        margin-top: 100px;
    }
</style>
